//SPDX-FileCopyrightText: Copyright 2022-2024 深圳市同心圆网络有限公司
//SPDX-License-Identifier: GPL-3.0-only

import React, { useState } from "react";
import { Button, Select, Space, Tabs } from "antd";
import s from "./DataViewPage.module.less";
import LocalDataSourceList from "./LocalDataSourceList";
import LocalDataViewList from "./LocalDataViewList";
import EditLocalViewModal from "./compoents/EditLocalViewModal";
import EditLocalSourceModal from "./compoents/EditLocalSourceModal";
import { PlusOutlined } from "@ant-design/icons";
import EditProjectViewModal from "./compoents/EditProjectViewModal";
import ProjectDataViewList from "./ProjectDataViewList";
import { observer } from 'mobx-react';
import { useStores } from "@/hooks";

const DataViewPage = () => {
    const appStore = useStores('appStore');
    const userStore = useStores('userStore');
    const projectStore = useStores('projectStore');

    const [activeKey, setActiveKey] = useState<"localView" | "localSource" | "projectView">("localView");
    const [showAddLocalViewModal, setShowAddLocalViewModal] = useState(false);
    const [showAddLocalSourceModal, setShowAddLocalSourceModal] = useState(false);
    const [showAddProjectViewModal, setShowAddProjectViewModal] = useState(false);
    const [localViewVersion, setLocalViewVersion] = useState(0);
    const [localSourceVersion, setLocalSourceVersion] = useState(0);
    const [projectViewVersion, setProjectViewVersion] = useState(0);
    const [curProjectId, setCurProjectId] = useState("");

    return (
        <div className={s.tabs_wrap}>
            <Tabs activeKey={activeKey}
                type='card'
                onChange={key => {
                    setActiveKey(key as "localView" | "localSource" | "projectView");
                }}
                tabBarExtraContent={
                    <Space style={{ marginRight: "20px" }}>
                        {activeKey == "localView" && (
                            <Button type="primary" icon={<PlusOutlined />} onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setShowAddLocalViewModal(true);
                            }}>创建本地视图</Button>
                        )}
                        {activeKey == "localSource" && (
                            <Button type="primary" icon={<PlusOutlined />} onClick={e => {
                                e.stopPropagation();
                                e.preventDefault();
                                setShowAddLocalSourceModal(true);
                            }}>创建本地数据源</Button>
                        )}
                        {activeKey == "projectView" && (
                            <>
                                <Select value={curProjectId} onChange={value => setCurProjectId(value)} style={{ width: "150px" }}>
                                    <Select.Option value="">全部项目</Select.Option>
                                    {projectStore.projectList.map(item => (
                                        <Select.Option key={item.project_id} value={item.project_id}>{item.basic_info.project_name}</Select.Option>
                                    ))}
                                </Select>
                                <Button type="primary" icon={<PlusOutlined />} onClick={e => {
                                    e.stopPropagation();
                                    e.preventDefault();
                                    setShowAddProjectViewModal(true);
                                }}>创建项目视图</Button>
                            </>
                        )}
                    </Space>
                }>
                <Tabs.TabPane tab={<h2>本地视图</h2>} key="localView">
                    {activeKey == "localView" && (
                        <div className={s.content_wrap}>
                            <LocalDataViewList dataVersion={localViewVersion} />
                        </div>
                    )}
                </Tabs.TabPane>
                <Tabs.TabPane tab={<h2>本地数据源</h2>} key="localSource">
                    {activeKey == "localSource" && (
                        <div className={s.content_wrap}>
                            <LocalDataSourceList dataVersion={localSourceVersion} />
                        </div>
                    )}
                </Tabs.TabPane>
                {appStore.vendorCfg?.ability.enable_project && userStore.userInfo.featureInfo.enable_project && projectStore.projectList.length > 0 && (
                    <Tabs.TabPane tab={<h2>项目视图</h2>} key="projectView">
                        {activeKey == "projectView" && (
                            <div className={s.content_wrap}>
                                <ProjectDataViewList dataVersion={projectViewVersion} projectId={curProjectId} />
                            </div>
                        )}
                    </Tabs.TabPane>
                )}
            </Tabs>
            {showAddLocalViewModal && (
                <EditLocalViewModal onCancel={() => setShowAddLocalViewModal(false)} onOk={() => {
                    setShowAddLocalViewModal(false);
                    setLocalViewVersion(localViewVersion + 1);
                }} />
            )}
            {showAddLocalSourceModal && (
                <EditLocalSourceModal onCancel={() => setShowAddLocalSourceModal(false)} onOk={() => {
                    setShowAddLocalSourceModal(false);
                    setLocalSourceVersion(localSourceVersion + 1);
                }} />
            )}
            {showAddProjectViewModal && (
                <EditProjectViewModal onCancel={() => setShowAddProjectViewModal(false)} onOk={() => {
                    setShowAddProjectViewModal(false);
                    setCurProjectId("");
                    setProjectViewVersion(projectViewVersion + 1);
                }} />
            )}
        </div>
    );
};

export default observer(DataViewPage);